﻿@model WalkingTec.Mvvm.Core.BaseVM
@using WalkingTec.Mvvm.Core
@using System.Text.Json

<wt:tab>
	<wt:tabheaders>
		<wt:tabheader title="新增元素" />

		<wt:tabheader title="使用说明" />

	</wt:tabheaders>
	<wt:tabcontents>

		<wt:tabcontent>
			<wt:fieldset title="Tag">
				<h2>颜色</h2>
				<wt:tag bg-color="Red">wtm</wt:tag>
				<wt:tag bg-color="Black">wtm</wt:tag>
				<wt:tag bg-color="Blue">wtm</wt:tag>
				<wt:tag bg-color="Cyan">wtm</wt:tag>
				<wt:tag bg-color="Gray">wtm</wt:tag>
				<wt:tag bg-color="Green">wtm</wt:tag>
				<wt:tag bg-color="Orange">wtm</wt:tag>

				<h2>大小</h2>
				<wt:tag bg-color="Red" font-size="ExtraMini">wtm</wt:tag>
				<wt:tag bg-color="Red" font-size="Mini">wtm</wt:tag>
				<wt:tag bg-color="Red" font-size="Small">wtm</wt:tag>
				<wt:tag bg-color="Red" font-size="Normal">wtm</wt:tag>
				<wt:tag bg-color="Red" font-size="Big">wtm</wt:tag>
				<wt:tag bg-color="Red" font-size="ExtraBig">wtm</wt:tag>
			</wt:fieldset>

			<wt:fieldset title="QRCode">
				<wt:qrcode text="hello wtm"></wt:qrcode>
			</wt:fieldset>

			<wt:fieldset title="DataList">
				<h2>将它放进表格里，能够发挥出很大的作用</h2>
				<input list="wtm-list" />
				@{
					var items = new List<ComboSelectListItem> { new() { Text = "wtm", Value = "wtm" }, new() { Text = "layui", Value = "layui" }, new() { Text = "vue", Value = "vue" }, };
				}
				<wt:datalist id="wtm-list" items="items" />
			</wt:fieldset>

			<wt:fieldset title="Print">
				<h2>这是一个打印区域,打印区域内的排版为绝对排版，不会因屏幕大小发生改变</h2>
				<wt:br clear="true" />
				<wt:print wt-size="Mini">
					<wt:fieldset title="">
						<wt:report-header title="叹为观止的wtm框架" left-text="打印时间：@DateTime.Now" right-text="单号：@Model.ViewDivId" />
						<wt:row items-per-row="ItemsPerRowEnum.Three">
							<wt:display label-text="客户" display-text="王小虎" />
							<wt:display label-text="性别" display-text="男" />
							<wt:display label-text="地址" display-text="上海。。。。。" />

							<wt:display label-text="金额" display-text="￥ 100" />
							<wt:display label-text="付款方式" display-text="现金" />
							<wt:display label-text="付款时间" display-text="@DateTime.Now" />

							<wt:display label-text="超长的备注名字" display-text="这是一个很长的字段，这是一个很长的字段这是一个很长的字段，这是一个很长的字段，这是一个很长的字段" colspan="3" />
						</wt:row>
					</wt:fieldset>
				</wt:print>
			</wt:fieldset>

			<wt:fieldset title="响应式弹窗">
				通过配置wt:dialog-config，来设置弹窗尺寸。
				<wt:row>
					<wt:linkbutton url="/demo/dialogconfig?width=800" text="指定具体的宽度" />
					<wt:linkbutton url="/demo/dialogconfig?width=-200" text="不指定具体的宽度，但指定宽度距屏幕的差" />
					<wt:linkbutton url="/demo/dialogconfig?width=80&ispercent=true" text="指定宽度占屏幕的百分比" />
					<wt:linkbutton url="/demo/dialogconfig?width=80&height=90&ispercent=true" text="指定宽度和高度分别占屏幕的百分比" />
					<wt:linkbutton url="/demo/dialogconfig?width=80&height=90&ispercent=true&isresponsive=true" text="指定宽度和高度分别占屏幕的百分比,并设置响应式" />
					<wt:linkbutton url="/demo/dialogconfig?width=800&height=500&title=这是一个指定尺寸的弹窗" text="指定具体的宽度和高度,动态标题" window-title="弹窗"/>
				</wt:row>
			</wt:fieldset>
			<h1>参见Blog模块</h1>
		</wt:tabcontent>

		<wt:tabcontent>
			<h1>修改项目的_ViewImports.cshtml文件</h1>
			<pre>
				@@using ReaWTM.LayuiHelper;
				@@using Microsoft.Extensions.Localization;
				@@using LayuiDemo;
				@@addTagHelper *, ReaWTM.LayuiHelper
			</pre>

			<h1>修改_Layout.cshtml</h1>


			<div>注释掉 script src="/_js/framework_layui.js?time=@DateTime.Now.Ticks">script</div>

			<div>增加 script src="/_js/rea-wtm.min.js?time=@DateTime.Now.Ticks">script</div>

			<h1>Demo项目无需修改</h1>


		</wt:tabcontent>
	</wt:tabcontents>
</wt:tab>
